// AcroDesign 组件封装
import { defineComponent, h } from 'vue'

export default defineComponent({
  name: 'AcroDesign',
  props: {
    type: {
      type: String,
      default: 'button',
      validator: (value) => ['button', 'card', 'input', 'textarea', 'select', 'modal', 'toast'].includes(value)
    },
    variant: {
      type: String,
      default: 'primary'
    },
    size: {
      type: String,
      default: 'medium'
    },
    label: {
      type: String,
      default: ''
    },
    modelValue: {
      type: [String, Number, Boolean, Array, Object],
      default: ''
    },
    options: {
      type: Array,
      default: () => []
    },
    placeholder: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    message: {
      type: String,
      default: ''
    },
    onClose: {
      type: Function
    },
    onConfirm: {
      type: Function
    },
    confirmText: {
      type: String,
      default: '确认'
    },
    cancelText: {
      type: String,
      default: '取消'
    }
  },
  emits: ['click', 'update:modelValue', 'close', 'confirm', 'cancel'],
  computed: {
    buttonClasses() {
      const base = 'inline-flex items-center justify-center font-medium transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2'
      const sizes = {
        small: 'px-3 py-1.5 text-sm rounded-md',
        medium: 'px-4 py-2 rounded-md',
        large: 'px-6 py-3 rounded-lg text-base'
      }
      const variants = {
        primary: 'bg-primary hover:bg-primary/90 text-white shadow focus:ring-primary',
        secondary: 'bg-gray-100 hover:bg-gray-200 text-gray-800 focus:ring-gray-400',
        success: 'bg-green-500 hover:bg-green-600 text-white shadow focus:ring-green-500',
        danger: 'bg-red-500 hover:bg-red-600 text-white shadow focus:ring-red-500',
        warning: 'bg-yellow-500 hover:bg-yellow-600 text-white shadow focus:ring-yellow-500',
        info: 'bg-blue-500 hover:bg-blue-600 text-white shadow focus:ring-blue-500',
        link: 'text-primary hover:text-primary/80 underline',
        outline: 'border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-primary'
      }
      const disabled = 'opacity-50 cursor-not-allowed'
      
      return [base, sizes[this.size], variants[this.variant], this.disabled ? disabled : ''].join(' ')
    },
    inputClasses() {
      const base = 'w-full px-3 py-2 border rounded-md focus:outline-none transition-all'
      const states = {
        normal: 'border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20',
        error: 'border-red-500 focus:border-red-500 focus:ring-2 focus:ring-red-200',
        disabled: 'bg-gray-100 border-gray-200 cursor-not-allowed opacity-50'
      }
      
      return [base, this.disabled ? states.disabled : states.normal].join(' ')
    },
    cardClasses() {
      const base = 'bg-white rounded-xl shadow-soft p-6 transition-all duration-300'
      const hover = 'hover:shadow-lg'
      const sizes = {
        small: 'p-4',
        medium: 'p-6',
        large: 'p-8'
      }
      
      return [base, hover, sizes[this.size]].join(' ')
    }
  },
  methods: {
    handleClick() {
      if (!this.disabled) {
        this.$emit('click')
      }
    },
    handleInput(event) {
      this.$emit('update:modelValue', event.target.value)
    },
    handleClose() {
      this.$emit('close')
      if (this.onClose) {
        this.onClose()
      }
    },
    handleConfirm() {
      this.$emit('confirm')
      if (this.onConfirm) {
        this.onConfirm()
      }
    },
    handleCancel() {
      this.$emit('cancel')
      this.handleClose()
    }
  },
  render() {
    switch (this.type) {
      case 'button':
        return h('button', {
          class: this.buttonClasses,
          onClick: this.handleClick,
          disabled: this.disabled
        }, this.label)
      
      case 'card':
        return h('div', { class: this.cardClasses }, this.$slots.default ? this.$slots.default() : [])
      
      case 'input':
        return h('input', {
          type: 'text',
          class: this.inputClasses,
          value: this.modelValue,
          onInput: this.handleInput,
          placeholder: this.placeholder,
          disabled: this.disabled
        })
      
      case 'textarea':
        return h('textarea', {
          class: this.inputClasses,
          value: this.modelValue,
          onInput: this.handleInput,
          placeholder: this.placeholder,
          disabled: this.disabled
        })
      
      case 'select':
        return h('select', {
          class: this.inputClasses,
          value: this.modelValue,
          onInput: this.handleInput,
          disabled: this.disabled
        }, [
          h('option', { value: '' }, '请选择'),
          ...this.options.map(option => 
            h('option', { value: option.value }, option.label)
          )
        ])
      
      case 'modal':
        if (!this.visible) return null
        return h('div', { 
          class: 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50',
          onClick: this.handleClose
        }, [
          h('div', { 
            class: 'bg-white rounded-xl p-6 max-w-md w-full mx-4',
            onClick: e => e.stopPropagation()
          }, [
            h('div', { class: 'flex justify-between items-center mb-4' }, [
              h('h3', { class: 'text-xl font-bold' }, this.title),
              h('button', { 
                class: 'text-gray-500 hover:text-gray-700',
                onClick: this.handleClose
              }, '×')
            ]),
            this.$slots.default ? this.$slots.default() : h('p', this.message),
            h('div', { class: 'flex justify-end space-x-3 mt-4' }, [
              h('button', { 
                class: 'px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50',
                onClick: this.handleCancel
              }, this.cancelText),
              h('button', { 
                class: 'px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90',
                onClick: this.handleConfirm
              }, this.confirmText)
            ])
          ])
        ])
      
      case 'toast':
        if (!this.visible) return null
        const toastClasses = [
          'fixed top-4 right-4 px-4 py-2 rounded-lg shadow-lg z-50',
          this.variant === 'success' ? 'bg-green-500 text-white' : 
          this.variant === 'error' ? 'bg-red-500 text-white' : 
          this.variant === 'warning' ? 'bg-yellow-500 text-white' : 
          this.variant === 'info' ? 'bg-blue-500 text-white' : 'bg-gray-800 text-white'
        ].join(' ')
        return h('div', { class: toastClasses }, this.message)
      
      default:
        return null
    }
  }
})